<template>
  <el-card>
    <el-table v-loading="loading" border :data="skuList">
      <el-table-column label="序号" type="index" align="center" width="80px" />
      <el-table-column label="名称" prop="skuName" />
      <el-table-column label="描述" prop="skuDesc" />
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" :alt="row.skuName" style="width: 100px; heigth: 100px">
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight" />
      <el-table-column label="价格(元)" prop="price" />
      <el-table-column label="操作" width="280px">
        <template v-slot="{row}">
          <el-tooltip v-if="row.isSale===0" content="上架" placement="top">
            <el-button type="success" icon="el-icon-top" size="mini" @click="skuOnSale(row)" />
          </el-tooltip>
          <el-tooltip v-else content="下架" placement="top">
            <el-button type="info" icon="el-icon-bottom" size="mini" @click="skuCancelSale(row)" />
          </el-tooltip>
          <el-tooltip content="修改" placement="top">
            <el-button type="edit" icon="el-icon-top" size="mini" />
          </el-tooltip>
          <el-tooltip content="查看详情" placement="top">
            <el-button type="info" icon="el-icon-info" size="mini" @click="getOneSkuInfo(row)" />
          </el-tooltip>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="您真的要删除此项Sku吗？" @onConfirm="deleteSkuInfo(row)">
            <el-tooltip slot="reference" content="删除Sku" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini" />
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页的内容 -->
    <el-pagination style="text-align: center" :current-page="page" :pager-count="7" :page-sizes="[3, 5, 8, 10, 15]" :page-size="limit" layout=" prev, pager, next, jumper,->,total, sizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 抽屉 -->
    <el-drawer size="45%" title="查看SKU信息" :visible.sync="drawer" :before-close="handleClose">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">名称</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            {{ skuInfo.skuName }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">描述</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            {{ skuInfo.skuDesc }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">价格</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">{{ skuInfo.price }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">平台属性</div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-tag v-for="skuAttrValue in skuInfo.skuAttrValueList" :key="skuAttrValue.id" type="success">{{ skuAttrValue.valueName }}</el-tag>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">图片列表</div>
        </el-col>
        <el-col :span="13" :offset="2">
          <el-carousel height="300px">
            <el-carousel-item v-for="skuImage in skuInfo.skuImageList" :key="skuImage.id">
              <img :src="skuImage.imgUrl" :alt="skuImage.imgName" style="width: 400px">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>

  </el-card>
</template>
<script>
import { reqDeleteSku, reqGetAllSkuList, reqGetOneSkuInfo, reqSkuCancelSale, reqSkuOnSale } from '@/api/product/sku'
export default {
  name: 'SkuList',
  data() {
    return {
      loading: false,
      page: 1,
      limit: 5,
      total: 1,
      skuList: [],
      skuInfo: {},
      drawer: false,
      direction: 'rtl'
    }
  },
  mounted() {
    this.getSkuList()
  },
  methods: {
    async getSkuList() {
      const { page, limit } = this
      this.loading = true
      const result = await reqGetAllSkuList({ page, limit })
      if (result.code === 200) {
        this.$message({
          type: 'success',
          message: '获取Sku列表成功'
        })
        this.skuList = result.data.records
        this.total = result.data.total
        this.loading = false
      } else {
        this.$message({
          type: 'error',
          message: '获取Sku列表失败'
        })
      }
    },
    // 分页内容
    handleSizeChange(val) {
      this.limit = val
      this.getSkuList()
    },
    // 分页相关 当页码发生了变化时触发的函数
    handleCurrentChange(val) {
      this.page = val
      this.getSkuList()
    },
    // 上架
    async skuOnSale(row) {
      const result = await reqSkuOnSale(row.id)
      if (result.code === 200) {
        this.$message({
          type: 'success',
          message: '上架成功'
        })
        // this.getSkuList()
        this.$set(row, 'isSale', 1)
        // row.isSale = 1
      } else {
        this.$message({
          type: 'error',
          message: '上架失败'
        })
      }
    },
    // 下架
    async skuCancelSale(row) {
      const result = await reqSkuCancelSale(row.id)
      if (result.code === 200) {
        this.$message({
          type: 'success',
          message: '上架成功'
        })
        // this.getSkuList()
        // row.isSale = 1
        this.$set(row, 'isSale', 0)
      } else {
        this.$message({
          type: 'error',
          message: '上架失败'
        })
      }
    },
    // 删除
    async deleteSkuInfo(row) {
      const result = await reqDeleteSku(row.id)
      if (result.code === 200) {
        this.$message.success('删除sku成功')
        this.getSkuList()
      } else {
        this.$message.success('删除sku失败')
      }
    },
    // 查看详情
    async getOneSkuInfo(row) {
      this.drawer = true
      const result = await reqGetOneSkuInfo(row.id)
      if (result.code === 200) {
        this.skuInfo = result.data
      } else {
        this.$message.error('获取SKU信息失败...')
      }
    },
    // 抽屉中的事件
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  > :first-child {
    text-align: right;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
// .bg-purple {
//   background: #d3dce6;
// }
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

